import { merge } from 'lodash-es'
import { getViewportPx } from '@/utils/formatter'
import 'echarts-liquidfill'
const fontSize = getViewportPx(60)
// 水球图公共hook
export const useLiquidFillOptions = (data: any[], options?: any) => {
  let baseOptions: any = {
    title: {
      text: '',
      left: 'left',
      padding: [2, 2, 2, 2],
      textStyle: {
        fontSize: getViewportPx(16)
      }
    },
    // tooltip: {
    //   trigger: 'item',
    //   formatter: '{b} : {c} ({d}%)'
    // },
    // legend: {
    //   bottom: getViewportPx(0),
    //   // itemWidth: 10,
    //   // itemHeight: 10,
    //   icon: 'circle',
    //   textStyle: {
    //     fontSize: getViewportPx(16)
    //   }
    // },
    series: [
      {
        type: 'liquidFill',
        shape: 'circle',
        radius: '80%',
        data,
        center: ['50%', '50%'],
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#33A3FF'
              },
              {
                offset: 1,
                color: '#00E68A'
              }
            ],
            globalCoord: false
          }
        ],
        backgroundStyle: {
          borderWidth: 1,
          color: 'rgba(68, 181, 226, 0.3)'
        },
        label: {
          normal: {
            textStyle: {
              fontSize,
              color: '#fff'
            },
            formatter: function (params) {
              return Math.floor(params.value * 100) + '%'
            }
          }
        },
        outline: {
          show: false
          // borderDistance: 10,
          // itemStyle: {
          //   borderWidth: 2,
          //   borderColor: '#112165'
          // }
        }
      }
    ]
  }
  baseOptions = merge(baseOptions, options)
  return {
    baseOptions
  }
}
